<template>
  <section>
    <van-sticky>
      <PageHeader title="会员相册" />
    </van-sticky>

    <div class="pd20">
      <van-uploader v-model="imgList" multiple :max-count="5" :before-read="beforeUploadRead" :after-read="afterUploadRead" @delete="onImgDelete" />
    </div>
  </section>
</template>

<script>
import PageHeader from "../componets/PageHeader";
import {
  BASE_STATIC_URL,
  fileUploadByBase64Uri,
  memberImagesAllUri,
  memberImagesDeleteUri,
  memberImagesUploadUri
} from "../../common/api";

export default {
  components: {
    PageHeader
  },
  data() {
    return {
      BASE_STATIC_URL: BASE_STATIC_URL,
      imgList: [],
      myImgList: []
    }
  },
  methods: {
    beforeUploadRead(file) {
      if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
        Toast('请上传 jpg/png 格式图片');
        return false;
      }
      return true;
    },
    afterUploadRead(file) {
      file.status = 'uploading';
      file.message = '上传中...';

      const that = this;
      that.$http.post(fileUploadByBase64Uri, {fileData: file.content, upload_token: that.GLOBAL.userInfo.upload_token}, {emulateJSON: true}).then(response => {
        let {msg, code, file_id, url} = response.body;
        if (code != 0) {
          that.toast(msg);
        } else {
          that.myImgList.push({
            url: url,
            file_id: file_id
          });
          file.status = 'done';
          file.message = '';

          that.afterUploadSuccess(file_id);
        }
      }, response => {
        that.toast('发生错误')
      })
    },
    afterUploadSuccess(fileId) {
      const that = this;
      const url = memberImagesUploadUri + '?file_id=' + fileId + '&user_id=' + this.$route.params.user_id;
      this.$http.get(url).then(response => {
        let {code, msg, data} = response.body
        if (code != 0) {
          that.toast(msg);
        }
      }, response => {
        // error callback
      })
    },
    onImgDelete(file, detail) {
      const that = this;
      const url = memberImagesDeleteUri + '?file_id=' + this.myImgList[detail.index].file_id;

      this.myImgList.splice(detail.index, 1);

      this.$http.get(url).then(response => {
        let {code, msg, data} = response.body
        if (code != 0) {
          that.toast(msg);
        }
      }, response => {
        // error callback
      })
    },
    getAll() {
      const that = this;
      const url = memberImagesAllUri + '?user_id=' + this.$route.params.user_id;
      this.$http.get(url).then(response => {
        let {code, msg, data} = response.body
        if (code != 0) {
          that.toast(msg);
        } else {
          that.myImgList = data.images;
          let imgList = [];
          for (let i = 0; i < data.images.length; i++) {
            imgList.push({
              url: data.images[i].url,
              status: 'done',
              message: ''
            })
          }
          that.imgList = imgList;
        }
      }, response => {
        // error callback
      })
    }
  },
  mounted: function () {
    this.getAll();
  }
}
</script>

<style scoped>

</style>
